<template>
  <div class="home">
    <transition
      :name="
        transitionInfo.useTransition
          ? transitionInfo.pageTransitionClass
          : 'no-transition'
      "
    >
      <router-view v-show="!routerInfo.isLoading"></router-view>
    </transition>

    <transition
      :name="
        transitionInfo.useTransition
          ? transitionInfo.pageTransitionClass
          : 'no-transition'
      "
    >
      <tabbar
        ref="tabbar"
        :active-color="activeColor"
        :inactive-color="normalColor"
        v-model="active"
        v-show="!routerInfo.isLoading"
      >
        <tabbar-item
          v-for="(item, index) in tabbarList"
          :key="index"
          :to="item.path"
          :info="
            item.title == '购物车' && cartList.length ? cartList.length : ''
          "
        >
          <span
            :style="{ color: active == index ? activeColor : normalColor }"
            >{{ item.title }}</span
          >
          <img slot="icon" :src="active == index ? item.active : item.normal" />
        </tabbar-item>
      </tabbar>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
import { Tabbar, TabbarItem } from "vant";

export default {
  name: "home",
  data() {
    return {
      activeColor: "#23397A",
      normalColor: "#949BA3",
      active: 0,
      cartList: [],
      tabbarList: [
        {
          title: "购物车",
          normal: require("@/assets/images/购物车满.png"),
          active: require("@/assets/images/购物车满拷贝.png"),
          path: "/home/my"
        },
        {
          title: "我的",
          normal: require("@/assets/images/我的拷贝.png"),
          active: require("@/assets/images/我的.png"),
          path: "/home/my"
        }
      ]
    };
  },
  components: {
    Tabbar,
    TabbarItem
  },
  updated() {
    this.setTabbar();
  },
  mounted() {
    this.setTabbar();
    this.cartList = localStorage.getItem("addCart")
      ? JSON.parse(localStorage.getItem("addCart"))
      : [];
  },
  methods: {
    // 根据路径来修改this.active
    setTabbar() {
      let toPath = this.$route.path;
      if (toPath == "/home/my") {
        this.active = 1;
      } else if (toPath == "/home/shopping_cart") {
        this.active = 2;
      } else if (toPath == "/home/shopping_mall") {
        this.active = 1;
      } else if (toPath == "/home/message") {
        this.active = 0;
      }
    }
  }
};
</script>

<style scoped>
.home {
  padding-bottom: 60px;
  background-color: #fff;
}
</style>
